import React from 'react'


import DetailsHeader from '../../../components/Header/Header'

import DetailsSwiper from '../../../components/Swiper/Swiper'

import api from '../../../api/index'


import './DetailsView.less'

import Tabs from '../../../components/Tabs/Tabs'

let { getDetailsData } = api.details
export default class DetailsView extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            detailsSwiper: [],
            detailsComment: {},
            isTrue:true,
            detailsShowList:{},
            data:{}

        }


    }


    componentDidMount() {

        console.log(this.props.detailsData)

        let content = this.props.id;
        console.log(content)
        getDetailsData(content).then(res => {
            console.log(res)
            this.setState({
                detailsSwiper: res.imgs,
                data:res
            })
        })



    }




    render() {

        let { detailsSwiper, detailsComment ,isTrue,data} = this.state

        // let  data=detailsShowList

        console.log(data)


        return (
            <div className="detail-info">
                <DetailsHeader title='商品详情' />
                <DetailsSwiper banners={detailsSwiper} />


                <Tabs>
                    {/* 左边 */}

                   <tab tabname="房屋信息">
                    <h3>{data.title}</h3>
                        <div className="box">
                            <ul>
                                <li>
                                    <span>{data.price}/月</span>
                                    <p>租金</p>
                                </li>
                                <li>
                                    <span>{ data.info ?  data.info.type :''}/月</span>
                                    <p>房型</p>
                                </li>
                                <li>
                                    <span>{data.houseType}</span>
                                    <p>面积</p>
                                </li>
                            </ul>
                        </div>
                        <div className="info">
                            
                            <div className="info-list">
                                <p>楼层：{  data.info? data.info.level:''}</p>
                                <p>装修：{  data.info? data.info.style:""}</p>
                            </div>
                            <div className="info-list">
                                <p>类型：{  data.info? data.info.type:''}</p>
                                <p>朝向：{  data.info? data.info.orientation:""}</p>
                            </div>   
                            <div className="info-list">
                                <p>年代：{ data.info? data.info.years:""}</p>
                            </div>
                        </div>
                    </tab>



              {/* 右边 */}
                    <tab tabname="房屋信息2">
                    <h3>{data.title}</h3>
                        <div className="box">
                            <ul>
                                <li>
                                    <span>{data.price}/月</span>
                                    <p>租金</p>
                                </li>
                                <li>
                                    <span>{ data.info ?  data.info.type :''}/月</span>
                                    <p>房型</p>
                                </li>
                                <li>
                                    <span>{data.houseType}</span>
                                    <p>面积</p>
                                </li>
                            </ul>
                        </div>
                        <div className="info">
                            
                            <div className="info-list">
                                <p>楼层：{  data.info? data.info.level:''}</p>
                                <p>装修：{  data.info? data.info.style:""}</p>
                            </div>
                            <div className="info-list">
                                <p>类型：{  data.info? data.info.type:''}</p>
                                <p>朝向：{  data.info? data.info.orientation:""}</p>
                            </div>   
                            <div className="info-list">
                                <p>年代：{ data.info? data.info.years:""}</p>
                            </div>
                        </div>
                    </tab>

                    {/* { isTrue ?     <div> left </div> :    <div> right</div> } */}
                       



                </Tabs>


            </div>
        )
    }
}